<template>
	<el-dialog v-model="showModel" append-to-body :lock-scroll="false" :title="title" width="992px" draggable :close-on-press-escape="false" @close="handleClose(ruleFormRef)">
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100">
			<el-tabs v-model="activeName">
				<el-tab-pane label="基础信息" name="1">
					<el-form-item label="商品分类" prop="categoryId">
						<el-cascader 
							v-model="ruleForm.categoryId" 
							:options="categoryList"
							:props="{ checkStrictly: true ,value:'id',label:'name' , children:'subCategories'}"
							placeholder="请选择商品分类" 
						/>
					</el-form-item>
					<el-form-item label="商品名称" prop="name">
						<el-input v-model="ruleForm.name" placeholder="请输入商品名称" style="width: 50%;" />
					</el-form-item>
					<el-form-item label="商品卖点" prop="sellingPoints">
						<el-input v-model="ruleForm.sellingPoints" placeholder="请输入商品卖点" style="width: 50%;" />
					</el-form-item>
					<el-form-item label="是否上架" prop="isActive">
						<el-switch v-model="ruleForm.isActive"></el-switch>
					</el-form-item>
					<el-form-item label="商品主图" prop="image">
						<uw-image 
							:src="ruleForm.image" 
							:showMack="true" 
							:imageList="[ruleForm.image]"
							v-if="ruleForm.image"
							@deleteChange="ruleForm.image=''" 
						/>
						<div class="uw-update-btn uw-border-white-smoke-all uw-flex-center" @click.stop="showManagerFun(false)" v-else >
							<el-icon :size="30" color="#F5F5F5">
								<Plus />
							</el-icon>
						</div>
					</el-form-item>
					<el-form-item label="商品轮播图" prop="bannerImage">
						<div class="uw-mr-10" v-for="(item,index) in ruleForm.bannerImage" :key="index">
							<uw-image 
								:src="item"
								:showMack="true"
								:initialindex="index" 
								:imageList="ruleForm.bannerImage" 
								@deleteChange="()=>{ruleForm.bannerImage.splice(index,1)}"
							/>
						</div>
						<div class="uw-update-btn uw-border-white-smoke-all uw-flex-center" @click.stop="showManagerFun(true)">
							<el-icon :size="30" color="#F5F5F5">
								<Plus />
							</el-icon>
						</div>
					</el-form-item>
				</el-tab-pane>
				<el-tab-pane label="规格信息" name="2">
					<el-form-item label="商品规格" prop="goodsType">
						<el-radio-group v-model="ruleForm.goodsType">
							<el-radio :value="1">单规格</el-radio>
							<el-radio :value="2">多规格</el-radio>
						</el-radio-group>
					</el-form-item>
					<!-- 单规格 -->
					<SingleSpecForm :ruleForm="ruleForm" v-if="ruleForm.goodsType === 1" />
					<!-- 多规格 -->
					<MultiSpecForm v-if="ruleForm.goodsType === 2" :data="goodsDBinfo" ref="MultiSpecFormRef" />
				</el-tab-pane>
				<el-tab-pane label="商品详情" name="3">
					<el-form-item label="详细内容" prop="content">
						<uiwu-editor v-model="ruleForm.content" />
					</el-form-item>
				</el-tab-pane>
				<el-tab-pane label="售后信息" name="4">
					<el-form-item label="售后天数" prop="afterSaleDays">
						<el-input v-model="ruleForm.afterSaleDays" placeholder="请输入售后天数" />
					</el-form-item>
					<el-form-item label="售后说明" prop="afterSaleInfo">
						<uiwu-editor v-model="ruleForm.afterSaleInfo" />
					</el-form-item>
				</el-tab-pane>
			</el-tabs>

		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="handleClose(ruleFormRef)">取消</el-button>
				<el-button type="primary" @click="submit">确定</el-button>
			</div>
		</template>
		<uw-image-manager :isMultiple="isMultiple" v-if="showManager" @change="changeImage" />
	</el-dialog>
</template>

<script setup lang="ts">
	import { ref, watch, reactive, nextTick } from 'vue';
	import uwImageManager from '@/components/uw-image-manager/uw-image-manager.vue';
	import uwImage from '@/components/uw-image/uw-image.vue';
	import SingleSpecForm from './SingleSpecForm.vue';
	import MultiSpecForm from './MultiSpecForm.vue';
	import UiwuEditor from '@/components/uiwu-editor/uiwu-editor.vue';
	import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
	import { addGoodsApi, editGoodsApi } from '@/api/goods';
	import { ruleFormData , rulesData , propsData } from '../goods'
	const emits = defineEmits(['update:modelValue', 'close', 'confirm', 'change'])
	const props = defineProps(propsData)
	const showManager = ref(false)
	const showModel = ref<boolean>(false)
	const activeName = ref<string>('1')
	const isMultiple = ref<boolean>(false)
	const ruleForm = reactive(ruleFormData)
	const goods_id = ref<number>(0)
	const ruleFormRef = ref<FormInstance>()
	const MultiSpecFormRef = ref<any>(null)
	const goodsDBinfo = ref(null)
	const rules = reactive<FormRules>(rulesData)
	/**
	 * 展示图片库
	 */
	const showManagerFun = (boole:boolean) => {
		showManager.value = true
		isMultiple.value = boole
	}
	/**
	 * 选择图片回调
	 */
	const changeImage = (event:any) => {
		showManager.value = false
		if(isMultiple.value){
			const list = event.map((val:any)=>val.url)
			ruleForm.bannerImage.push(...list)
		}else{
			ruleForm.image = event[0].url
		}
	}
	/**
	 * 暴露出去给父级调用的方法
	 * 数据合并
	 * @param row 数据源
	 */
	const mergeData = (row : any) => {
		nextTick(()=>{
			Object.getOwnPropertyNames(ruleForm).forEach((item) => {
				if (row.hasOwnProperty(item)) {
					ruleForm[item] = row[item];
				}
			});
			goods_id.value = row['id']
			goodsDBinfo.value = row
		})
	}

	/**
	 * submit 提交数据
	 */
	const submit = () => {
		ruleFormRef.value?.validate(async (valid : any) => {
			if (!valid) return false
			const formData = JSON.parse(JSON.stringify(ruleForm))
			if (goods_id.value === 0) {
				formData.categoryId = ruleForm.categoryId.length > 1 ? ruleForm.categoryId[1] : ruleForm.categoryId[0]
			}
			if (formData.goodsType == 2) {
				const { item, specifications, specArray } = MultiSpecFormRef.value.submitForm();
				formData.specification = item
				formData.specifications = JSON.stringify(specifications)
				formData.specArray = JSON.stringify(specArray)
			}
			const result : any = goods_id.value === 0 ? await addGoodsApi(formData) : await editGoodsApi({ ...formData }, goods_id.value)
			ElMessage.success(result.message)
			emits('change')
			handleClose(ruleFormRef.value)
		});
	}
	/**
	 * 关闭弹窗
	 */
	const handleClose = (formEl: FormInstance | undefined) => {
		formEl.resetFields()
		goods_id.value = 0
		goodsDBinfo.value = null
		emits('update:modelValue', false)
		emits('close')
		showModel.value = false
	}
	watch(() => props.modelValue, (e : boolean) => {
		showModel.value = e
	})
	defineExpose({
		mergeData
	})
</script>

<style scoped lang="scss">
	.uw-update-btn{
		width: 100px;
		height: 100px;
		cursor: pointer;
	}
</style>